import chartConfig from "./chartConfig";

// 故障前三
const getTopThree = (arrs) => {
  if (arrs == {} || arrs == null || arrs == undefined) {
    console.log("arr传空");
    arrs = {
      types: ["A单位", "B单位", "B1单位", "VV单位", "F单位"],
      data: [1, 3, 2, 4, 6],
    };
  }

  let unitOption = {
    grid: {
      top: "5%",
      left: "20%",
      right: "10%",
    },
    tooltip: {
      trigger: "item",
      formatter: "{b}: {c}",
    },
    xAxis: {
      type: "value",
      name: "单位总数",
      nameTextStyle: {
        color: chartConfig.c_font_color,
        fontSize: chartConfig.c_font_size,
        align: "right",
        verticalAlign: "top",
        padding: [3, 0, 0, 0],
      },
      axisLabel: {
        color: chartConfig.c_font_color,
        fontSize: chartConfig.c_font_size,
        margin: 25,
      },
      minInterval: 1,
    },
    yAxis: {
      type: "category",
      data: arrs.types,
      axisLabel: {
        color: chartConfig.c_font_color,
        fontSize: chartConfig.c_font_size + 4,
        interval: 0,
        // rotate: 30,
        shadowOffsetY: 5,
      },
    },
    series: [
      {
        data: arrs.data,
        type: "bar",
        itemStyle: {
          normal: {
            color: function(params) {
              var colorlist = chartConfig.c_color_arr_6;
              return colorlist[params.dataIndex];
            },
            barBorderRadius: [0, 5, 5, 0],
          },
        },
        barCategoryGap: "50%",
        label: {
          show: true,
          formatter: function(data) {
            // console.log(data);
            if (data.name == "使用单位" && data.value > 0) {
              return data.value + " " + arrs.count;
            }
            return data.value;
          },
        },
      },
    ],
  };
  return unitOption;
};

// 饼图
const getRescuePie = (arrs) => {
  if (arrs == {} || arrs == null || arrs == undefined) {
    console.log("arr传空");
    arrs = {
      types: ["-", "-", "-", "-", "-", "-"],
      data: [
        { value: 0, name: "1-" },
        { value: 0, name: "2-" },
        { value: 0, name: "3-" },
        { value: 0, name: "4-" },
        { value: 0, name: "5-" },
        { value: 0, name: "6-" },
      ],
    };
  }

  let ret = []
  for (let i = 0; i < arrs.types.length; i++) {
    const ele = arrs.types[i];
    ret[i] = {name:ele, value:arrs.data[i]}
  }
  arrs.data = ret

  let deviceStatus = {
    color: chartConfig.c_color_arr_6,
    tooltip: {
      trigger: "item",
      formatter: "{b}: {c} ({d}%)",
    },
    // legend: {
    //   orient: "vertical",
    //   right: 10,
    //   data: arrs.types,
    //   textStyle: {
    //     color: chartConfig.c_font_color,
    //     fontSize: chartConfig.c_font_size,
    //   },
    // },
    series: [
      {
        type: "pie",
        radius: ["20%", "80%"],
        avoidLabelOverlap: false,
        label: {
          show: true,
          position: "outside",
          fontSize: chartConfig.c_font_size,
          formatter: "{b}: {c}",
          color: chartConfig.c_font_color,
        },
        emphasis: {
          label: {
            show: true,
            fontSize: chartConfig.c_font_size + 2,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: arrs.data,
      },
    ],
  };
  return deviceStatus;
};

// 柱状图
const getRescueBar = (arrs) => {
  if (arrs == {} || arrs == null || arrs == undefined) {
    console.log("arr传空");
    arrs = {
      types: ["-", "-", "-", "-", "-"],
      data: [1, 2, 3, 4, 5],
    };
  }

  let deviceYears = {
    grid: {
      top: "15%",
      left: "3%",
      right: "5%",
      bottom: "3%",
      containLabel: true,
    },
    tooltip: {
      trigger: "item",
      formatter: "{b}: {c}",
    },
    xAxis: {
      type: "category",
      data: arrs.types,
      axisLabel: {
        color: chartConfig.c_font_color,
        fontSize: chartConfig.c_font_size + 2,
        formatter: function (value, index) {
          return 'NO.'+ (index + 1)
      }
      },
    },
    yAxis: {
      type: "value",
      nameTextStyle: {
        color: chartConfig.c_font_color,
        fontSize: chartConfig.c_font_size + 2,
      },
      axisLabel: {
        color: chartConfig.c_font_color,
        fontSize: chartConfig.c_font_size + 2,
      },
    },
    series: [
      {
        data: arrs.data,
        type: "bar",
        showBackground: true,
        backgroundStyle: {
          color: "rgba(220, 220, 220, 0.2)",
        },
        itemStyle: {
          normal: {
            color: function(params) {
              var colorlist = chartConfig.c_color_arr_6;
              return colorlist[params.dataIndex];
            },
            barBorderRadius: [5, 5, 0, 0],
          },
        },
        label: {
          show: true,
          formatter: "{c}",
          textStyle: {
            fontSize: chartConfig.c_font_size + 2,
          },
        },
      },
    ],
  };
  return deviceYears;
};

// 横柱状图
const getRescueBarHori = (arrs) => {
  if (arrs == {} || arrs == null || arrs == undefined) {
    console.log("arr传空");
    arrs = {
      types: ["A单位", "B单位", "B1单位", "VV单位", "F单位"],
      data: [1, 3, 2, 4, 6],
    };
  }

  let unitOption = {
    grid: {
      top: "5%",
      left: "16%",
      right: "10%",
    },
    tooltip: {
      trigger: "item",
      formatter: "{b}: {c}",
    },
    xAxis: {
      type: "value",
      name: "单位总数",
      nameTextStyle: {
        color: chartConfig.c_font_color,
        fontSize: chartConfig.c_font_size,
        align: "right",
        verticalAlign: "top",
        padding: [3, 0, 0, 0],
      },
      axisLabel: {
        color: chartConfig.c_font_color,
        fontSize: chartConfig.c_font_size,
        margin: 25,
      },
      minInterval: 1,
    },
    yAxis: {
      type: "category",
      data: arrs.types,
      axisLabel: {
        color: chartConfig.c_font_color,
        fontSize: chartConfig.c_font_size + 4,
        interval: 0,
        // rotate: 40,
        shadowOffsetY: 5,
        formatter: function (value, index) {
          return 'NO.'+ (index + 1)
      }
      },
    },
    series: [
      {
        data: arrs.data,
        type: "bar",
        itemStyle: {
          normal: {
            color: function(params) {
              var colorlist = chartConfig.c_color_arr_6;
              return colorlist[params.dataIndex];
            },
            barBorderRadius: [0, 5, 5, 0],
          },
        },
        barCategoryGap: "50%",
        label: {
          show: true,
          formatter: function(data) {
            // console.log(data);
            if (data.name == "使用单位" && data.value > 0) {
              return data.value + " " + arrs.count;
            }
            return data.value;
          },
        },
      },
    ],
  };
  return unitOption;
};

// 线图
const getRescueLine = (arrs) => {
  if (arrs == {} || arrs == null || arrs == undefined) {
    console.log("arr传空");
    arrs = {
      types: ["-", "-", "-", "-", "-", "-"],
      data: [1, 7, 14, 21, 28, 31],
    };
  }
  console.log('---------------------------');
  console.log(arrs);
  console.log('---------------------------');

  let yearTrend = {
    tooltip: {
      trigger: "axis",
    },
    grid: {
      left: "3%",
      right: "5%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: arrs.types,
      axisLabel: {
        color: chartConfig.c_font_color,
        fontSize: chartConfig.c_font_size,
      },
    },
    yAxis: {
      type: "value",
      axisLabel: {
        color: chartConfig.c_font_color,
        fontSize: chartConfig.c_font_size + 2,
      },
    },
    series: {
      name: "故障数",
      type: "line",
      stack: "总量",
      data: arrs.data,
    },
  };
  return yearTrend;
};

export {
  getTopThree,
  getRescuePie,
  getRescueBar,
  getRescueBarHori,
  getRescueLine,
}
